<template>
	<div>
		<div class="head">
			<router-link tag="div" class="return" to="/My"></router-link>
			安全设置
		</div>
		<div class="overlay" style="padding: 20px 10px 10px;">
			<div class="overlay-content scrolling">
				<van-cell-group @click="nextUpdatePayPassword" v-if="payPwdType == 1">
					<van-field readonly label="修改支付密码" right-icon="arrow" />
				</van-cell-group>
				<van-cell-group @click="nextAddPayPassword" v-if="payPwdType == 0">
					<van-field readonly label="设置支付密码" right-icon="arrow" />
				</van-cell-group>
				<van-cell-group @click="$router.push({path: '/UpdatePwd'})">
					<van-field readonly label="修改登录密码" right-icon="arrow" />
				</van-cell-group>
				<van-cell-group @click="payPsd">
					<van-field readonly label="我的助记词" right-icon="arrow" />
				</van-cell-group>
			</div>
		</div>
		<!-- 交易密码 -->
		<van-popup v-model="show2" position="bottom" class="buyo">
			<div>
				<span>请输入登录密码</span>
				<span style="color:#525fd6;float:right" @click="quit">取消</span>
			</div>
			<div class="safetyPsd">
				<!-- <div style="font-size: 14px;color: rgb(133, 141, 172);padding-bottom: 10px;">XIBRUSH资金交易密码</div> -->
				<van-field placeholder="请输入登录密码" maxlength="20" type="password" v-model.trim="payPwd" />
				<!-- <div style="padding: 10px 0px;color:#525fd6;font-size: 14px;" @click="$router.push({path: '/UpdateMb'})" class="tar">忘记支付密码？</div> -->
				<div class="btn">
					<van-button slot="button" size="normal" type="info" :loading="loading" loading-text="确认" @click.native="isOk">确认</van-button>
				</div>
			</div>
		</van-popup>
		<!-- 助记词 -->
		<van-popup v-model="show" style="width: 100%;height: 100%;border-radius: 5px;background: #2c3145;text-align: left;" :close-on-click-overlay="false">
			<div style="padding: 15px 25px;color:white;background: #2c3145;text-align: center;font-size:14px">
				<span>我的助记词</span>
			</div>
			<div style="color: white;font-size: 14px;background: #2c3145;">
				<van-grid :column-num="3" class="registerList">
					<van-grid-item v-for="(item,index) in list" :key="Math.random()">
					    <div style="border: 1px solid rgb(93,107,151);padding: 3px 10px;border-radius: 5px;background: rgb(93,107,151);width:70%;text-align:center">
					    	<span v-text="item"></span>
					    </div>
					</van-grid-item>
				</van-grid>
				<div style="padding: 10px 15px 0;color: #525fd6;">*注：请务必保管好助记词，您可将其抄下或截屏。</div>
				<div style="padding: 0px 15px 10px;color: #525fd6;">如忘记密码可通过助记词找回。</div>
				<div>
					<div id="copyText" v-text="listCopy" style="color: transparent;background-color: transparent;position: absolute;z-index: 0;-webkit-user-select: text;word-wrap: break-word;width: 80%;"></div>
				</div>
				<div class="btnn" style="padding:10px 70px">
					<van-button slot="button" size="normal" type="info" style="height: 38px;line-height: 36px;" @click="sure">确定</van-button>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import { base64 } from 'vux';
	import { safety, mine, base, change} from './../utils/api';
	import { encryptDes, decryptDes } from './../utils/des'
	export default {
		data() {
			return {
				payPwdType: '',
				mydate: '', // 当前的年月
				show2: false,
				show: false,
				payPwd:'',
				loading: false,
				listCopy:'',
				list: [
					'name','list','name2','list2','name3','list3','name4','list4','name5','list5','name6','list6'
				],
			}
		},
		created() {
			
		},
		mounted() {
			this.tradePass();
			// 获取当前的年月日
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let strDate = date.getDate();
			if(month >= 1 && month <= 9) {
				month = "0" + month;
			}
			if(strDate >= 0 && strDate <= 9) {
				strDate = "0" + strDate;
			}
			let currentdate = year + month + strDate;
			this.mydate = currentdate;
		},
		methods: {
			payPsd(){
				this.show2 = true
			},
			quit() {
				this.show2 = false;
			},
			sure(){
				this.$router.push({path: '/My'})
			},
			tradePass() { //支付密码
				safety.getTransaction().then(res => { // 判断是否设置支付密码
					if(res.data == 1) { // 1：已设置
						this.payPwdType = 1;
					} else {
						this.payPwdType = 0;
					}
				})
			},
			nextUpdatePayPassword() { // 修改支付密码
				this.$router.push({
					path: '/UpdatePayPwd',
					query: {
						type: 1
					}
				});
			},
			nextAddPayPassword() { // 设置支付密码
				this.$router.push({
					path: '/UpdatePayPwd',
					query: {
						type: 0
					}
				});
			},
			isOk() {
				if(!this.payPwd){
					this.$toast("交易密码不能为空");
					return false
				}
				this.loading = true;
				base.getCredentials().then(res => {
					if(res.code == 8008) {
						this.k = res.data.k;
						this.v = res.data.v;
						change.passWrodZjc({
							// 'coinId': 0,
							'key': this.k,
							'encryptedData': this.rsaEncrypt(this.payPwd + ',' + this.v) //加密支付密码
						}).then(res => {
							if(res.code == 200) {
								this.show2 = false;
								this.loading = false;
								this.payPwd = '';
								this.show = true
								this.list = res.data.trim().split(" ");//获取助记词
								// setTimeout(() => {
								// 	this.loading = false;
								// 	this.payPwd = '';
								// 	this.show = true
								// }, 500);
							} else if(res.code == 500) {
								// this.$toast(res.msg);
								this.loading = false;
							}
							this.showText = res.msg;
							setTimeout(() => {
								this.showText = '';
							}, 2000);
							this.$toast(res.msg);
						})
					}
				})
			},
			getAuthentication() {
				mine.getPersonal().then(res => {
					let idCard = encryptDes(res.data.idCard, this.mydate, res.data.idcardVerifyStatus);
					let trueName = encryptDes(res.data.trueName, this.mydate, res.data.idcardVerifyStatus);
					this.$router.push({
						path: '/Authentication',
						query: {
							type: res.data.idcardVerifyStatus,
							idCard: base64.encode(idCard),
							trueName: base64.encode(trueName),
							idcardRemark: res.data.idcardRemark
						}
					});
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.buyo >div{font-size: 14px!important;background:#24293e;color:#525fd6;padding: 15px 25px}
.buyo >div span:nth-child(1){color:#fff}
.safetyPsd{background:#2c3145;padding:10px 20px}
.safetyPsd /deep/ .van-cell{background:#2c3145;padding:10px;margin-bottom:15px}
.safetyPsd /deep/ .van-cell:not(:last-child)::after{border:0}
.btnn /deep/ .van-button,.btn /deep/ .van-button{background:#525fd6!important;border:1px solid #525fd6!important}
.registerList /deep/ .van-grid-item__content--center{background-color:rgb(44, 49, 69)}
.registerList /deep/ .van-grid-item__content::after{border-width:0}
	.head~.overlay {
		top: 44px;
	}
	
	.van-cell {
		background-color: #333952;
		color: #FFFFFF;
		font-size: 15px;
		padding: 15px;
	}
	
	[class*=van-hairline] {
		position: unset;
		border-bottom: 2px solid #2c3145;
	}
	
	.van-hairline--top-bottom::after {
		border: 0;
	}
	
	/deep/ .van-field__label {
		max-width: 120px;
	}
	
	/deep/.van-cell__title span {
		min-width: 140px;
		display: inline-block;
	}
</style>